.fui-select
  @include input-radius-box()
  display: inline-flex
  align-items: center
  justify-content: flex-start
  position: relative
  height: $input-height
  min-width: 100px
  transition: border-color .2s ease-in-out

  &:hover
    border: 1px solid $input-border-color
    outline: none

  &.open
    border-color: $input-border-color

  &-head
    flex: 1
    position: relative
    display: flex
    align-items: center
    overflow: hidden
    cursor: pointer

    input
      width: 100%
      height: 100%
      outline: 0
      padding: 0
      line-height: normal
      border-width: 0
      border-radius: 4px
      background-color: $bg-body
      font-size: 100%
      color: $text-default

    input.disabled
      visibility: hidden

    svg
      margin: 2px
      flex-shrink: 0

    &-remove
      flex-shrink: 0
      display: none
      width: 1rem
      height: 1rem
      text-align: center
      cursor: default
      animation: appear .2s ease-in-out
      transition: transform .2s ease-in-out

      &:hover
        transform: scale(1.3)

    &:hover
      > svg.hover-hide
        display: none

      .fui-select-head-remove
        display: inline-block

  &-head.search
    cursor: text

  &-label,
  &-placeholder
    @include flex-align(center, flex-start)
    position: relative
    flex: 1
    margin-right: .25rem
    min-height: $input-height - .75rem
    user-select: none
    overflow: hidden

  &-label.search,
  &-placeholder.search
    position: absolute
    left: 0
    right: 0
    padding-right: 16px
    pointer-events: none

  &-label.mute
    color: $text-mute

  &-label

    &-text
      @include text-ellipsis

  &-placeholder
    color: $text-mute

  // 没有选项时，显示提示信息
  &-no-options,
  &-loading-options,
  &-options
    @include input-radius-box()
    min-height: $input-height
    max-height: 250px
    padding: 0
    margin: 2px 0
    overflow-x: hidden
    overflow-y: auto

  &-option,
  &-option-all
    @include text-ellipsis()
    display: flex
    line-height: 1.3
    padding: 6px 12px
    cursor: pointer

    &:not([disabled=true]):hover
      background: $bg-hover

    &[disabled=true]
      color: $text-mute
      background-color: $bg-disabled
      cursor: not-allowed

    &.active
      color: $brand-primary
      background: $bg-hover

    .fui-checkbox
      display: flex
      margin-right: 2px

      .input-checkbox
        height: unset

  &-option-all
    color: $text-mute

  &-no-options,
  &-loading-options
    user-select: none

  &-loading-options

    > *:not(.fui-select-loading)
      filter: blur(2px)

    .fui-rotate
      margin-right: 4px

    .fui-select-loading
      @include flex-align(center, flex-start)
      position: absolute
      width: 100%
      height: 100%
      top: 0
      left: 0
      background: $bg-disabled
      opacity: 0.3
      cursor: default

.fui-select[disabled=true]
  color: $text-mute
  background-color: $bg-disabled

.fui-select[readonly=true]
  background-color: $bg-disabled

@keyframes appear
  0%
    opacity: .2

  50%
    opacity: .6

  100%
    opacity: 1
